import util from './util'
// import _alert from './alert'

var paging = function (options, type) {
    var defaultSetting = {
        data: {},
        ajaxEvent: function (data, callback) { },
        before: function (event) { },
        success: function (result) { },
        hasQuick: false,
        limitPage: false,
        countPage: false,
    };
    this.options = $.extend({}, defaultSetting, options);
    this.type = type;
    // this.parent = $('<div class="layout-table-paging"></div>');
    this.html = $('<ul class="layui-box layui-laypage layui-laypage-default"></ul>');
    // this.parent.append(this.html);
    this.pageCount = null;
};
paging.prototype = {
    constructor: this,
    render: function () {
        this.init();
        return this.html;
    },
    init: function () {
        var _this = this;
        this.options.before(this);
        if (this.options) {
            this.options.ajaxEvent(this.options.data, function (result) {
                if (!result) {
                    _this.options.success(result);
                } else {
                    _this.pageCount = _this.hasPaging(result.totalRecord, _this.options.data);
                    _this.totalRecord = result.totalRecord;
                    _this.template();
                    _this.Quick();
                    _this.limitPage();
                    _this.countPage();
                    _this.options.success(result.list);
                };
            });
        } else {
            console.error('paging error : parameters must be an object');
        };
    },
    template: function () {
        var _this = this;
        _this.html.empty();
        var pages = this.pageCount;
        // if (!pages) {
        //     return;
        // };
        var option = $.extend(true, {}, _this.options);
        var index = parseInt(option.data.pageInfo.index);
        // 上一页
        var prev = '';
        if (index > 1) {
            prev = $('<a class="layui-laypage-prev" style="cursor:pointer"><i class="fa fa-angle-left" aria-hidden="true"></i></a>');
            prev.unbind().bind('click', function () {
                var newData = $.extend(true, {}, option);
                newData.data.pageInfo.index = parseInt(newData.data.pageInfo.index) - 1;
                _this.options = newData;
                _this.init();
            });
        } else {
            prev = $('<a class="layui-laypage-prev layui-disabled"><i class="fa fa-angle-left" aria-hidden="true"></i></a>');
        };
        _this.html.append(prev);
        // 中间页
        if (index != 1 && index >= 4 && pages != 4) {
            var first = $('<a class="page-item" style="cursor:pointer">' + 1 + '</a>');
            first.click(function () {
                var newData = $.extend(true, {}, option);
                newData.data.pageInfo.index = 1;
                _this.options = newData;
                _this.init();
            });
            _this.html.append(first);
        };
        if (index - 2 > 2 && index <= pages && pages > 5) {
            _this.html.append('<a class="page-item disabled">...</a>');
        };
        var start = index - 2,
            end = index + 2;
        if ((start > 1 && index < 4) || index == 1) {
            end++;
        };
        if (index > pages - 4 && index >= pages) {
            start--;
        };

        function middleButton(index, middleElement) {
            middleElement.bind('click', function () {
                var newData = $.extend(true, {}, option);
                newData.data.pageInfo.index = parseInt(index);
                _this.options = newData;
                _this.init();
            });
        };
        for (; start <= end; start++) {
            if (start <= pages && start >= 1) {
                if (start != index) {
                    var middle = $('<a class="layui-laypage-curr" style="cursor:pointer">' + start + '</a>');
                    middleButton(start, middle);
                    _this.html.append(middle);
                } else {
                    _this.html.append('<a class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>' + start + '</em></a>');
                }
            }
        };
        if (index + 2 < pages - 1 && index >= 0 && pages > 5) {
            _this.html.append('<a class="layui-laypage-curr layui-disabled">...</a>');
        };
        if (index != pages && index < pages - 2 && pages != 4) {
            var last = $('<a class="layui-laypage-curr" style="cursor:pointer">' + pages + '</a>');
            last.click(function () {
                var newData = $.extend(true, {}, option);
                newData.data.pageInfo.index = parseInt(pages);
                _this.options = newData;
                _this.init();
            });
            _this.html.append(last);
        };
        // 下一页
        var next = '';
        if (index < pages) {
            next = $('<a class="layui-laypage-next" style="cursor: pointer;"><i class="fa fa-angle-right" aria-hidden="true"></i></a>');
            next.click(function () {
                var newData = $.extend(true, {}, option);
                newData.data.pageInfo.index = parseInt(newData.data.pageInfo.index) + 1;
                _this.options = newData;
                _this.init();
            });
        } else {
            next = $('<a class="layui-laypage-next layui-disabled"><i class="fa fa-angle-right" aria-hidden="true"></i></a>');
        }
        _this.html.append(next);

    },
    countPage: function () {
        var _this = this;
        var pages = this.totalRecord;
        if (this.options.countPage) {
            var html = $('<span class="layui-laypage-count">共 ' + pages + ' 条</span>');
            this.html.append(html);
        };
    },
    limitPage: function () {
        var _this = this;
        var count = this.options.data.pageInfo.count;
        if (this.options.limitPage) {
            var html = $('<span class="layui-laypage-limits"><select lay-ignore=""><option value="10" selected="">10 条/页</option><option value="20">20 条/页</option><option value="30">30 条/页</option><option value="40">40 条/页</option><option value="50">50 条/页</option></select></span>');
            html.find('select').val(count);
            html.find('select').change(function () {
                var value = html.find('select').val();
                _this.options.data.pageInfo.index = 1;
                _this.options.data.pageInfo.count = value;
                _this.init();
            });

            this.html.append(html);
        };
    },
    Quick: function () {
        var _this = this;
        var pages = this.pageCount;
        if (this.options.hasQuick) {
            if (this.html.find('.quiteTo').length != 0) {
                this.html.find('.quiteTo').remove();
            };
            var html = $('<span class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页<button type="button" class="layui-laypage-btn">确定</button></span>');
            // html.find(input);
            var button = html.find('.layui-laypage-btn');
            var input = html.find('input');

            input.val(_this.options.data.pageInfo.index);
            button.click(function () {
                var ans = util.rules({
                    text: '页码', rules: ['notNull', 'int', function (value) {
                        if (value < 1 || value > pages) {
                            return '超过页码范围'
                        } else {
                            return false;
                        }
                    }]
                }, input.val());
                if (!ans) {
                    var option = $.extend(true, {}, _this.options);
                    option.data.pageInfo.index = parseInt(input.val());
                    _this.options = option;
                    _this.init();
                } else {
                    top.layer.msg(ans, { icon: 5, shift: 6 });
                }
            });
            this.html.append(html);
        };
    },
    hasPaging: function (totalCount) {
        var pages = Math.ceil(parseInt(totalCount) / parseInt(this.options.data.pageInfo.count));
        return pages;
    },
    pageOption: function (data, index) {
        var html = '';
        html += '<option value="' + data + '" ' + (data == index ? 'selected="selected"' : '') + '>' + data + '</option>';
        return html;
    },
    refresh: function (data) {
        this.options.data = data;
        this.init();
    }
};

export default function (option) {
    return new paging(option);
};

